<template>
  <el-dialog
    v-model="dialogFormVisible"
    :before-close="closeDialog"
    :close-on-click-modal="closeOnClickModal"
    :title="dialogTitle"
    :width="`${dialogWidth}px`"
    class="custom-dialog"
  >
    <el-form
      ref="dialogFormRef"
      :model="formData"
      :rules="dialogRules"
      label-position="right"
      label-width="80px"
      class="margin-top-sm padding-lr-sm form-move-box"
    >
      <div class="padding-left-sm margin-tb-xs text-dark text-df text-bold">{{
        formData.templateName
      }}</div>
      <el-form-item label="移动到" prop="formType">
        <el-input readonly :value="displayValue" placeholder="请输入分类名称" clearable></el-input>
      </el-form-item>

      <div class="move-card-box">
        <div
          v-for="(item, index) in cateList"
          :key="index"
          class="select-item-card"
          :class="{
            'active-card': `${item.value}` === `${formData.formType}`,
          }"
          @click="handleUpdateCate(item)"
        >
          <img class="title-icon" src="@/assets/images/plan/plan-icon.png" alt="" />
          <span class="over-title">{{ item.label }}</span></div
        >
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';

  import {
    postHandbookTemplateAdd as addData,
    postUpdate as updateData,
  } from '@/api/handbookTemplate/index';

  const props = defineProps({
    options: {
      type: Object,
      required: true,
      default: () => {
        return {
          width: 0,
          title: '',
          modal: false,
          visible: false,
          editStatus: false,
          defaultValue: {},
          cancelText: '取消',
          confirmText: '确定',
          cate: [],
        };
      },
    },
  });

  const emit = defineEmits(['confirm', 'close']);

  let formData = ref(props.options.defaultValue);
  const isEdit = computed(() => {
    return props.options.editStatus;
  });

  const dialogTitle = computed(() => {
    return props.options.title;
  });

  const dialogWidth = computed(() => {
    return props.options.width;
  });
  const cateList = computed(() => {
    return props.options.cate;
  });
  const closeOnClickModal = computed(() => {
    return props.options.modal;
  });
  const displayValue = computed(() => {
    return cateList.value.find((item) => `${item.value}` === `${formData.value.formType}`)?.label;
  });
  // 组件ref
  const dialogFormRef = ref();
  const dialogRules = {
    templateName: [{ required: true, message: '请填写模板名称', trigger: 'blur' }],
    formType: [{ required: true, message: '请填写类型', trigger: 'blur' }],
  };

  function submitForm() {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          let result = isEdit.value
            ? await updateData(formData.value)
            : await addData(formData.value);

          if (result.code === 200) {
            ElMessage({
              message: `${isEdit.value ? '编辑' : '新建'}成功`,
              type: 'success',
            });
            emit('confirm');
          }
        } catch (error) {
          console.log('error', error);
        }
      })
      .catch((error) => {
        console.log('error', error);
        ElMessage({
          message: '参数验证错误，请仔细填写表单数据!',
          type: 'error',
        });
      });
  }
  function rest() {
    formData.value = {};
    isEdit.value = false;
  }
  const dialogFormVisible = ref(props.options.visible);

  function showDialog() {
    dialogFormVisible.value = true;
    nextTick(() => {
      dialogFormRef.value.resetFields();
    });
  }
  function closeDialog() {
    rest();
    emit('close');
  }
  function handleUpdateCate(item) {
    formData.value.formType = item.value;
  }

  function filterCateName(item) {}

  watch(
    () => props.options.visible,
    (val) => {
      dialogFormVisible.value = val;
    },
  );
  watch(
    () => props.options.defaultValue,
    (val) => {
      formData.value = val;
    },
  );
  // watch(
  //   () => props.options.editStatus,
  //   (val) => {
  //     isEdit.value = val;
  //   },
  // );
</script>

<style lang="scss" scoped>
  .form-move-box {
    width: 96%;
    margin: 20px auto;
  }
  .move-card-box {
    width: 100%;
    margin: 16px auto;
    border: 1px solid var(--el-border-color);
    padding-top: 10px;

    max-height: 500px;
    overflow-y: scroll;
  }
  .select-item-card {
    width: 96%;
    height: 30px;
    background-color: #fff;
    box-shadow: 0 1px 4px #f3fbf5;
    border-radius: 4px;
    display: flex;
    align-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    margin: 2px auto 10px auto;
    padding-left: 10px;
    color: #333;
    .title-icon {
      width: 24px;
      height: 24px;
      display: block;
      margin-right: 4px;
    }
    .over-title {
      max-width: 170px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      display: block;
    }
  }
  .active-card {
    box-shadow: 0px 0px 8px 0px #dfe7e7;
    background-color: #f5fdf8;
  }
</style>
